<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot数据作用域</title>
    <style>
    	.custom{font-size: 16px;border:1px solid green;}
    	.custom p{background: rgba(255,0,0,.3);}
    </style>
</head>
<body>
    <div id="app">
		<custom>
			<div>{{msg}}</div>
		</custom>
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>
    	/*
			slot ：插入 html 结构的同时也会 将传入的数据带入子组件

    	*/
    	var custom = Vue.extend({
    		data(){
    			return{
    				msg : 'hello world!'
    			}
    		},
    		template : `
    			<div>
    				<slot>{{msg}}</slot>
    				<span>{{msg}}</span>
    			</div>
    		`
    	});
    	Vue.component('custom',custom);
	    let vm = new Vue({
	    	el : '#app',
	    	data : {
	    		msg : 'hello vue!'
	    	}
	    });
    </script>
</body>
</html>